<template>
  <view class="padding-bottom-button tui-skeleton">
    <l-background />
    <view class="margin-top-16">
      <template v-if="list.length">
        <tui-list-cell v-for="(item,index) in list" :key="index" :unlined="unlined(index)" @click="jumpSave(item)">
          <view class="flex-row align-center justify-between">
            <view>
              <view class="flex-row align-center margin-bottom-16">
                <text class="text-32 color-t1 text-bold">{{ item.name }}</text>
              </view>
              <text class="text-24 color-t1">{{ item.phone || '暂无手机号' }}</text>
            </view>
            <view class="padding-10" @click.stop="del(item.id,index)">
              <text class="tbb-shanchu text-40 color-t1" />
            </view>
          </view>
        </tui-list-cell>
        <l-footer :has-more="hasMore" />
      </template>
      <template v-else>
        <tui-skeleton v-if="showSkeleton" :preload-data="preloadData" />
        <l-no-data v-else text="暂无数据" type="data" />
      </template>
    </view>

    <tui-modal :show.sync="showModal" title="提示" content="是否确认删除该客户？" @click="modalClick" />

    <safe-area-bottom />
    <l-bottom-button text="添加客户" @click="jumpSave" />
  </view>
</template>

<script>
import { mapMutations } from 'vuex'
import { getCustomer } from '@/common/api/user'
import { delCustomer } from '../api'
import { preloadData } from './index'
export default {
  name: 'CustomerManagement',
  data() {
    return {
      list: [],
      page: 1,
      pagerSize: 20,
      hasMore: true,
      showSkeleton: true,
      preloadData,
      showModal: false,
      itemId: '',
      inx: ''
    }
  },
  computed: {
    unlined() {
      return (inx) => {
        return inx === this.list.length - 1
      }
    }
  },
  onShow() {
    this.reload()
    this.setCustomerInfo(null)
  },
  onPullDownRefresh() {
    this.reload()
  },
  onReachBottom() {
    this.nextPage()
  },
  methods: {
    // 获取客户列表
    async getCustomer() {
      const [err, res] = await getCustomer({
        current: this.page,
        size: this.pagerSize
      })
      this.showSkeleton = false
      uni.stopPullDownRefresh()
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data.records
      if (!list) list = []
      if (list.length < this.pagerSize) this.hasMore = false
      if (this.page === 1) this.list = list
      else this.list.push(...list)
    },
    // 刷新
    reload() {
      this.hasMore = true
      this.page = 1
      this.getCustomer()
    },
    // 下一页
    nextPage() {
      if (this.hasMore) {
        this.page++
        this.getCustomer()
      }
    },
    del(id, inx) {
      this.itemId = id
      this.inx = inx
      this.showModal = true
    },
    modalClick(e) {
      this.showModal = false
      if (e.index) {
        this.deleteCustomer()
      }
    },
    async deleteCustomer() {
      this.showModal = false
      const [err, res] = await delCustomer({
        id: this.itemId
      })
      if (!this.$http.errorCheck(err, res)) return false
      this.list.splice(this.inx, 1)
      this.toast('删除成功')
    },
    jumpSave(item) {
      if (item) this.setCustomerInfo(item)
      this.jump('/user/save-customer/save-customer')
    },
    ...mapMutations({
      setCustomerInfo: 'user/setCustomerInfo'
    })
  }
}
</script>

<style scoped>

</style>
